<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;

        }

        .line {
            height: 100vh;
            width: 1px;
            background: gray;
            position: absolute;
            /* top: 0; */
        }

        .line:nth-child(1) {
            left: 10px;
            top: 10px;
        }

        .line:nth-child(2) {
            left: 20px;
            top: 20px;
        }

        .horizontal {
            height: 1px;
            width: 100vw;
            position: absolute;
            background: gray;
        }
    </style>
</head>

<body>


    <script>
        // 循环次数与宽度
        // 屏幕宽度/11            
        console.log(3 % 1);

        console.log(window.innerWidth % 11);
        console.log(window.innerWidth);
        let gap = 10

        for (let index = 0; index < window.innerWidth / gap - 2; index++) {

            document.body.innerHTML += `<div class="line" style="left:${index * gap}px"></div>`
        }
        // for (let j = 0; j < 100; j++) {
        //     let horizontal = `<div class=" horizontal" style="top:${j * 10}px"></div>`
        //     document.body.innerHTML += horizontal
        //     console.log(horizontal);

        // }
    </script>
</body>

</html>